a primer on making great web graphics




There is an art to making small web graphics that look great. The filters in this series help you master that art.

The first tool we'll look at is Browser Preview. It helps you decide how to prepare your graphics for presentation on the web.

Let's take an image of some fruit (from Samples in your Photoshop folder):

 










Looks great in thousands of colors. But what about in 256 colors? We could save the file, switch our monitor settings and open up the graphic in a web browser. Or just click on Browser Preview's "256 colors" checkbox:

 









And the rest of our display has not been subjected to 256 colors. Cool!

But we're on a Mac. Not the machine that most people use to view the web. What do all those Windows users see? Click on the Windows radio button to find out.

 









Hey! Why'd the image get dark?

A PC running Windows doesn't have any idea of what kind of monitor is connected. It can't do gamma correction to present a more even range of colors. Because there are so many types of uncorrected monitors on PCs, you can select the radio buttons to sample a range of hypothetical monitors.


Now let's see what happens when we start to compress the image.

First, let's take a look at JPEG. Images compressed with JPEG rely on a mathematical technique called the Discrete Cosine Transformation (DCT). Explaining the math behind the algorithm is hard. Explaining effect is simple: your image gets more blocky as you lower the quality and increase the compression. The image also loses some color resolution.

The following image is about 2K bytes (quality of 1, based on image):

 









Compare it with Photoshop's default (quality of 8, not based on image):

 









The second image's quality is much higher. It's also more than 5 times the size of the first (at about 11K bytes).

The trick with JPEG is to lower the quality to the point where you can't see the blocks. Browser Preview lets you see the effects of the compression as you adjust the quality.

Another issue when using JPEG are it's colors. It uses millions of colors to store the image. However, you don't have any control over which colors it uses; could be 216 colors, could be 16 million. Browser Preview will show you how the millions of colors will look on a display with 256 colors.


The other format for web graphics is GIF. A GIF file can have up to 256 colors. And you can choose whatever colors you want for the graphic.

Colors in a GIF can either be "web safe" or not. Colors that are not web safe will dither on a display with 256 colors. That is because the color in the GIF file can not be reproduced exactly.

Let's look at the fruit in 256 non-web safe colors on a browser that can display thousands of colors:

 









Now, let's look at the same GIF file on a browser with a 256 color display:

 









This is called "browser dithering". It happens when you use colors that are not web safe. Sometimes it looks right, sometimes it doesn't. Before Browser Preview, the only way you could check the graphic was to save it and open it up in a browser running on a 256 color display.

A GIF file that uses web safe colors will look the same on any browser, regardless of it's display setting. Here's an example of the graphic with web safe colors:

 









It looks worse, but at least it's consistent.

One common technique used to make the web safe colors more palatable is to add dithering to the file (as opposed to the dithering in the browser, discussed above):

 









Looks much better.

So why not dither all your images? Because it increases the file size. The non-dithered image is about 7K bytes. The dithered image is about 10K bytes. Browser Preview tells you how much the dithering costs in terms of file size.

As you're probably beginning to realize, there's a lot of factors involved in getting the graphics to look good. But what are the factors for getting the files small so they load quickly?

The biggest factor is reducing the number of colors. Fewer colors allows more information to be packed into each byte of the file. For example, if you are using 256 (8-bit) colors, then only one pixel can be put into each byte of the file. If you are using 16 (4-bit) colors, then you can put two pixels into each byte of the file. And it's half as big.

Another factor in reducing the size of the file is to maximize the areas of solid color. The GIF compression algorithm can record these areas of solid color much more efficiently than areas of constantly changing colors. That's why dithering adds so much to the file size (30% in the example above).

Browser Preview makes it easy to check out different scenarios and find the compression scheme that looks the best and creates the smallest file.


Now we've seen that using the web safe palette makes the most consistent graphics. What if we could play around with this palette?

Enter the filter: Web Posterize

Here's the fruit with increased contrast and a yellow tint:

 










The graphic can be stylized even further by removing the color and tinting the foreground and background:

 









Both of the images above are completely Web Safe. And both will compress well; there are large areas of flat color and small palette can be used for those colors.

Web Posterize is most effective when you aren't concerned with the fidelity of the original. Try it when you are concerned about grabbing eyes.


The final filter we're going to look at is Web Scrubber.

This filter helps you control which areas of the image will be dithered by the browser. Remember that a browser will dither a GIF file when it can't reproduce a color exactly.

Scrubbing an image shifts colors in the image towards the 216 web safe colors. You control how many colors get shifted. As more colors shift, fewer colors dither.

The following image was scrubbed into a 128 color (7-bit) GIF; about half the colors were shifted. On a display with thousands of colors, it will look like this:

 









On a 256 color display, it will look like this:

 










Note how some colors of the image don't dither (like the greens and browns on the rim of the plate). Other colors, such as orange tones, do dither. Both images look acceptable, even though they look different on the different platforms.

Note: This example is a bit contrived. This technique usually works best on navigational and banner graphics. Places where you want to mix dithering with areas of flat color.


We hope that this has helped you understand web graphics a little better. It's not an easy thing to learn; we have spent many hours scratching our heads. Hopefully, you will benefit from our trials and tools.